<template>
	<view class="bi-chart-quota-group" :class="['is-' + dir]">
		<slot></slot>
	</view>
</template>

<script>
export default {
	name: 'BiChartQuotaGroup',
	provide () {
		return {
			BiChartQuotaGroup: this
		}
	},
	props: {
		dir: {
			type: String,
			default: 'vertical',
			validator (value) {
				return ['horizon', 'vertical'].includes(value)
			}
		}
	},
	data () {
		return {
			items: []
		}
	},
	methods: {
		isLastItem (id) {
			let index = this.items.indexOf(id)
			return index === this.items.length - 1
		},
		addItem (id) {
			let index = this.items.indexOf(id)
			if (index >= 0) {
				return
			}
			this.items.push(id)
		},
		removeItem (id) {
			let index = this.items.indexOf(id)
			if (index < 0) {
				return
			}
			this.items.splice(index, 1)
		}
	}
}
</script>

<style lang="less">
.bi-chart-quota-group{
	&.is-vertical {
	}
	&.is-horizon {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}
</style>